<template>
<div style="text-align:center;margin-top:120px">
    <h2>good</h2>
    <h3>欢迎注册</h3>
        <el-form status-icon ref="form" :model="form" :rules="rules" label-width="80px"
        class="el_form">
            <el-form-item label="账号" prop="username">
                <el-input type="text" placeholder="请输入用户名" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkpassword">
            <el-input type="password" placeholder="请重输密码" v-model="form.checkpassword"></el-input>
            </el-form-item>
        </el-form>
    <div style="margin-left:10px;margin-top:30px">
        <span class="span" @click="submit('form')">注册</span>
        <span class="span" @click="reset('form')">重置</span>
        <span class="span2" @click="gologin()">已有账号？去登陆</span>
    </div>
</div>
</template>

<script>
export default {
    name:'register',
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请重输密码'));
            } else if (value !== this.form.password) {
            callback(new Error('密码不一致'));
            } else {
            callback();
            }
        };
        return{
            form:{
                username:'',
                password:'',
                checkpassword:'',
            },
            rules:{
                username:[{
                    required:true,
                    message:'请输入用户名',
                    trigger:'blur'
                }],
                password:[{
                    required:true,
                    message:'请输入密码',
                    trigger:'blur'
                }],
                checkpassword:[{
                    required: true,
                    validator: validatePass,
                    trigger: 'blur'
                    }],
            }
        }
    },
    methods:{
        reset(data) {
            this.$refs[data].resetFields();
        },
        gologin(){
            this.$router.push({name:'login'})
        },
        submit(data){
            this.$refs[data].validate((valid)=>{
                if(valid){
                    this.$addr.get(`user/register`,{
                        params:{
                            username:this.form.username,
                            password:this.form.password
                        }
                    }).then(
                        response=>{
                            console.log('注册请求成功',response.data);
                            if(response.data.state == 4000){
                                this.$message({
                                    message:response.data.message,
                                    type:'error'
                                }) 
                            }else{
                                this.$message({
                                    message:'恭喜您，注册成功',
                                    type:'success'
                                })
                                // this.$router.replace({name:'login'})
                                this.$router.replace({name:'phoneBand',
                                params:{'username':this.form.username}})
                            }
                        },
                        error=>{
                            this.$message({
                                message:'注册请求失败',
                                type:'error'
                            })
                            console.log("注册请求失败",error.message);
                        }
                    )
                }
            })
        }
    },
    mounted(){
        if(this.$route.params.username != null){
            this.form.username=this.$route.params.username
        }
    }
}
</script>

<style scoped>
.span{
    margin-left: 5px;
    font-size: 13px;
    background-color: rgb(153, 228, 255);
    padding: 15px;
    border-radius: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
}
.span2{
    margin-left: 10px;
    font-size: 10px;
    color: rgb(43, 138, 255);
    cursor: pointer;
}
.el_form{
    width: 230px;
    margin: 0px auto;
}
</style>